<template>
  <div
    class="head-nav-bar"
    :class="{'head-nav-bar-border': border}"
    :style="{position: fixed?'fixed':'relative', zIndex: zIndex}"
    @touchmove.prevent.stop
  >
    <div class="head-nav-bar-left" @click="onClickLeft">
      <slot name="left">
        <van-icon v-if="leftArrow" class="head-nav-bar-left-icon" name="arrow-left"/>
        <span v-if="leftText" class="head-nav-bar-left-text">{{leftText}}</span>
      </slot>
    </div>
    <div class="head-nav-bar-title">
      <slot name="title">{{title}}</slot>
    </div>
    <div class="head-nav-bar-right" @click="onClickRight">
      <slot name="right">
        <span v-if="rightText" class="head-nav-bar-text">{{rightText}}</span>
      </slot>
    </div>
  </div>
</template>
<script>
  /*
  * head-nav-bar 组件 用法参考 vant-ui 的 van-nav-bar 组件
  * */
  export default {
    name: 'head-nav-bar',
    props: {
      title: String,
      leftText: String,
      rightText: String,
      leftArrow: {
        type: Boolean,
        default: false
      },
      fixed: {
        type: Boolean,
        default: false
      },
      border: {
        type: Boolean,
        default: true
      },
      zIndex: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {}
    },
    methods: {
      onClickLeft() {
        this.$emit('click-left')
      },
      onClickRight() {
        this.$emit('click-right')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .head-nav-bar {
    top: 0;
    left: 0;
    width: 375px;
    height: 46px;
    background-color: #da1520;
    box-sizing: border-box;
    font-size: 14px;
    user-select: none;
    .head-nav-bar-left {
      position: absolute;
      top: 0;
      left: 15px;
      padding-right: 10px;
      height: 46px;
      line-height: 46px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .head-nav-bar-left-icon {
        padding-right: 5px;
        font-size: 20px;
        /*color: #fff;*/
      }
      .head-nav-bar-left-text {
        margin-left: -25px;
        padding-left: 25px;
        padding-right: 15px;
        /*color: #fff;*/
      }
      .head-nav-bar-left-text:active {
        background-color: #e8e8e8;
      }
    }
    .head-nav-bar-title {
      margin: 0 auto;
      max-width: 225px;
      font-size: 0.16rem;
      line-height: 46px;
      text-align: center;
      font-weight: 500;
      color: #fff;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .head-nav-bar-right {
      position: absolute;
      top: 0;
      right: 0;
      height: 46px;
      /*padding: 0 15px;*/
      line-height: 46px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .head-nav-bar-text {
        display: block;
        padding: 0 15px;
      }
      .head-nav-bar-text:active {
        background-color: #e8e8e8;
      }
    }
  }

  .head-nav-bar-border {
    border-bottom: 1px solid #e8e8e8;
  }

  .header-white {
    background-color: #fff;
    .head-nav-bar-left {
      color: #da1520;
    }
    .head-nav-bar-title {
      color: #666;
    }
    .head-nav-bar-right {
      color: #da1520;
    }
  }

</style>
